<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >

<!--      <el-form-item label="申诉日期" prop="appealDate">-->
<!--        <el-date-picker-->
<!--          v-model="queryParams.countDate"-->
<!--          value-format="YYYY-MM-DD"-->
<!--          type="date"-->
<!--          :disabled-date="disabledDate"-->
<!--          :shortcuts="shortcuts"-->
<!--          placeholder="请先选择申诉日期"-->
<!--          class="!w-220px"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="申诉日期" prop="thisCycle">
        <el-date-picker
          v-model="queryParams.thisCycle"
          value-format="YYYY-MM-DD"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :disabled-date="disabledDate"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
        >
          <Icon icon="ep:download" class="mr-5px"/>
          导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <div class="content_div">
    <!-- 当月周期 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="thisCycleList" :stripe="true"
                :show-overflow-tooltip="true">
        <el-table-column label="周期各企业申诉日数据" align="center">
          <el-table-column prop="col0" label="日期" align="center" width="210"/>
          <el-table-column prop="col1" label="全省申告量" align="center"/>
          <el-table-column prop="col2" label="中国电信" align="center"/>
          <el-table-column prop="col3" label="中国移动" align="center"/>
          <el-table-column prop="col4" label="中国联通" align="center"/>
          <el-table-column prop="col5" label="中国广电" align="center"/>
          <el-table-column prop="col5" label="虚拟商" align="center"/>
        </el-table-column>
      </el-table>
    </ContentWrap>

  </div>
</template>

<script setup lang="ts">
// import { dateFormatter } from '@/utils/formatTime'
// import download from '@/utils/download'
import { AppealListApi } from './index'
// import html2pdf from 'html2pdf.js';

/** 工单清单 列表 */
defineOptions({name: 'AppealReport'})

const disabledDate = ref((time: Date) => {
  return time.getTime() > Date.now()
})

const message = useMessage() // 消息弹窗

// const {t} = useI18n() // 国际化

const loading = ref(false) // 列表的加载中

const thisCycleList = ref([]) // 本月周期

const queryParams = reactive({
  thisCycle: undefined
})

const queryFormRef = ref() // 搜索的表单

const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getDayReport = async () => {
  loading.value = true
  thisCycleList.value = []
  try {
    const data = await AppealListApi.getAppealReport(queryParams)
    // console.log(data)
    thisCycleList.value = data.dayReportList
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  // 判断申诉日期是否选择
  if (!queryParams.thisCycle || queryParams.thisCycle.length <= 0) {
    message.warning('请选择申诉日期')
    return
  }
  getDayReport()
}

/** 重置按钮操作 */
const resetQuery = () => {
  // queryParams.thisCycle = undefined
  // 其它的表格数值也置空
  thisCycleList.value = []
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm();
    // 发起导出
    exportLoading.value = true;
    // 获取需要导出的HTML元素
    // const element = document.querySelector('.content_div'); // 根据需要修改选择器
    // 使用html2pdf.js将HTML元素导出为PDF
    // html2pdf().from(element).save('report.pdf');
  } catch {
  } finally {
    exportLoading.value = false;
  }
}

/** 初始化 **/
onMounted(() => {
  loading.value = true
  AppealListApi.getAppealReportDay({}).then((res) => {
    disabledDate.value = res.disabledDate
    queryParams.thisCycle = res.thisCycle
    loading.value = false
  })
})
</script>

<style scoped>
/** 设置 el-table 的表头文本不自动换行 */
::v-deep(.el-table th .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.content_div {
  margin-top: 10px;
}

.text-center {
  text-align: center;
}

.count_span {
  color: #2d8cf0;
}
</style>
